<template>
  <div>
    <flexbox :gutter="0">
      <flexbox-item :span="2">
        <div class="flex-demo flex-demo1"><span></span></div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-demo">全选</div>
      </flexbox-item>
      <flexbox-item :span="2">
        <div class="flex-demo">编辑</div>
      </flexbox-item>
    </flexbox>
    <!--商品列表-->
    <flexbox :gutter="0" class="sp">
      <flexbox-item :span="2">
        <div class="flex-sp flex-sp"><span>选</span></div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-sp">
          <!--里面在设置flexbox-->
          <flexbox>
            <flexbox-item :span="4" class="flex-sp-img">
              <div><img src="../../../static/assets/logo.png" alt=""></div>
            </flexbox-item>
            <flexbox-item>
              <ul>
                <li>英德新鲜无花果3斤装</li>
                <li><i>规格</i>3斤装</li>
                <li>¥<strong>200</strong>.00</li>
              </ul>
            </flexbox-item>
          </flexbox>
        </div>
      </flexbox-item>
      <flexbox-item :span="2">
        <div class="flex-sp">X1</div>
      </flexbox-item>
    </flexbox>
    <!--结算-->
    <flexbox class="js vux-1px-t" :gutter="0">
      <flexbox-item class="vux-1px-r" :span="3"></flexbox-item>
      <flexbox-item class="vux-1px-r flex-js">合计:<span>¥200.00</span> <i>不含邮费</i></flexbox-item>
      <flexbox-item class="vux-1px-r flex-js" :span="2"><router-link to="/order">去结算</router-link></flexbox-item>
    </flexbox>
    <sfooter></sfooter>
  </div>
</template>
<script>
  import {Flexbox, FlexboxItem} from 'vux'
  export default{
    components: {
      Flexbox,
      FlexboxItem
    }

  }
</script>
<style lang="less">
  i{
    font-style: normal;
    /*margin-right: 10px;*/
  }
  @import '~vux/src/styles/1px.less';

  .flex-demo {
    text-align: center;
    color: #1a191f;
    background-color: #ccc;
    background-clip: padding-box;
  }

  .flex-demo1 span {
    background-color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid red;
  }

  .flex-demo1 span.cur {
    background-color: tomato;
  }

  /*商品列表*/
  .sp{
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  .flex-sp {
    text-align: center;
    color: #1a191f;

    background-clip: padding-box;
  }

  .flex-sp>span {
    background-color: #fff;
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid red;
  }

  .flex-sp span.cur {
    background-color: tomato;
  }
  .flex-sp .flex-sp-img{
    width: 100px;
    height: 100px;
    background-color:pink;
    padding: 10px;
    box-sizing: border-box;
  }
  .flex-sp .flex-sp-img img{
    width:100%;
    height: 100%;
  }
  /*计算*/
  .js{
    position: fixed;
    left: 0;
    bottom:44px;
  }
  .flex-js{
    text-align: center;
  }
  .flex-js span{
    color:red;
  }
  .flex-js i{
    color: #ccc;
    margin-left: 10px;
  }
  .flex-js>a{
    color: #fff;
    background-color: #ff6600;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
</style>
